<template>

    <view>
        <scroll-view scroll-x class="bg-white nav text-center">
            <view :class="'cu-item ' + (wall === 1 ? 'text-blue cur' : '')" @tap="tabSelect" data-id="1">查询课程表</view>
            <view :class="'cu-item ' + (wall === 2 ? 'text-blue cur' : '')" @tap="tabSelect" data-id="2">查看成绩</view>
            <view :class="'cu-item ' + (wall === 3 ? 'text-blue cur' : '')" @tap="tabToEmpty" data-id="3">查找空教室</view>
        </scroll-view>

        <view v-if="wall===1">


            <view class="week-select">
                <view class="table-container">
                    <picker class="selecter2" mode="selector" :range="yearList" :value="yearIndex" range-key="name"
                            @change="yearChange">
                        {{ yearIndex === -1 ? '请选择' : yearList[yearIndex].name }}
                    </picker>
                    学年
                </view>
                <view class="table-container2">
                    第
                    <picker class="selecter" mode="selector" :range="weekList" :value="weekIndex" range-key=""
                            @change="weekChange">
                        {{ weekIndex === -1 ? '1' : weekList[weekIndex] }}
                    </picker>
                    周
                </view>
                <view class="table-container3">
                    <picker class="selecter-right" mode="selector" :range="termList" :value="termIndex" range-key="name"
                            @change="termChange">
                        {{ termIndex === -1 ? '请选择' : termList[termIndex].name }}
                    </picker>
                </view>


            </view>

            <view @touchstart="touchStart" @touchend="touchEnd">

                <lpx-timetable :class="show?'animation-fade':'animation-scale-up animation-reverse'"
                               style="animation-duration: 2s;" :timetables="courseList"></lpx-timetable>
            </view>
        </view>


        <view v-if="wall === 2">
            <view class="form-group">
                <view class="title">学年</view>
                <picker mode="selector" :range="yearList" :value="yearIndex" range-key="name" @change="yearChange">
                    {{ yearIndex === -1 ? '请选择' : yearList[yearIndex].name }}
                </picker>
                <view class="title">学期</view>
                <picker class="form-input" mode="selector" :range="termList" :value="termIndex" range-key="name"
                        @change="termChange">
                    {{ termIndex === -1 ? '请选择' : termList[termIndex].name }}
                </picker>
            </view>

            <view class="grid">
                <!-- <l-echart ref="chart"></l-echart> -->
                <qiun-data-charts
                    style="height: 100%;"
                    :background="'rgb(241,241,241)'"
                    :ontouch="true"
                    type="mix"

                    :opts="opts"
                    :chartData="scoreList"/>

            </view>

            <view class="cu-card dynamic">
                <view class="cu-item shadow"
                      style="border-radius: 10px!important;margin-left: 5px!important;margin-right: 5px!important;">
                    <view class="grid cu-form-group padding-bottom-xs padding-top-xs">
                        <view class="text-left text-xl">成绩列表</view>
                    </view>
                </view>


                <view v-for="(oneScore,index) in score" :key="index" class="cu-item shadow"
                      style="margin-bottom: 2px!important;margin-top: 2px!important; border-radius: 8px!important">
                    <view class="grid cu-form-group">
                        <view class="colorTiao" :class="'bg-'+color[index%6]"></view>

                        <view style="width: 90%;">
                            <view class="text-left text-lg justify-around">
                                {{ oneScore.courseName }}
                            </view>
                            <view class="text-gray text-xs  justify-around">
                                排名:{{ oneScore.order }} | 成绩:{{ oneScore.score }}|GPA:{{ oneScore.gpa }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>


<script>
import Timetable from '@/components/lpx-timetable/lpx-timetable';
const app = getApp();

const getData = (url, param) => {
    return new Promise((resolve, reject) => {
        uni.request({
            url: url,
            method: 'POST',
            data: param,
            header: {
                'Content-Type': 'application/json'
            },

            success(res) {
                resolve(res.data);
            },

            fail(err) {
                reject(err);
            }
        });
    });
};


export default {

    data() {
        return {
            color: ["blue", "orange", "yellow", "cyan", "green", "mauve"],

            opts: {},

            scoreList: {},
            score: [],

            //通过表格选取周
            weekTable: 0,
            //通过表格选取星期几
            dayTable: 0,
            //通过表格选取节次
            timeTable: 0,

            show: true,
            show2: true,
            yearList: [{
                name: "2020-2021",
                value: "2020"
            }, {
                name: "2021-2022",
                value: "2021"
            }, {
                name: "2022-2023",
                value: "2022"
            }, {
                name: "2023-2024",
                value: "2023"
            }, {
                name: "2024-2025",
                value: "2024"
            }, {
                name: "2025-2026",
                value: "2025"
            }, {
                name: "2026-2027",
                value: "2026"
            }, {
                name: "2027-2028",
                value: "2027"
            }, {
                name: "2028-2029",
                value: "2028"
            }, {
                name: "2029-2030",
                value: "2029"
            }, {
                name: "2030-2031",
                value: "2030"
            }, {
                name: "2031-2032",
                value: "2031"
            }],
            termList: [{
                name: "第一学期",
                value: 1
            }, {
                name: "第二学期",
                value: 2
            }],
            weekList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],

            //当前年
            year: '',
            //当前周
            week: 1,
            //当前学期
            term: "",

            yearIndex: -1,
            weekIndex: -1,
            termIndex: -1,

            timetables: [
                ['', '', '', '', '', '', '', '', '', '', '', ''],
                ['', '', '', '', '', '', '', '', '', '', '', ''],
                ['', '', '', '', '', '', '', '', '', '', '', ''],
                ['', '', '', '', '', '', '', '', '', '', '', ''],
                ['', '', '', '', '', '', '', '', '', '', '', '']
            ],

            WebConfig: {
                open_comment: ''
            },

            //默认页面
            wall: 1,

            //课程表列表
            courseList: [],

            sum: '',

            //开始滑动时的坐标
            startTouchX: 0.0,
            startTouchY: 0.0
        };
    },
    onPullDownRefresh() {


        uni.stopPullDownRefresh();
    },
    mounted() {

        uni.showLoading({
            title: '加载中...'
        });
        let that = this;
        if (uni.getStorageSync("yearIndex")) {
            that.setData({
                yearIndex: uni.getStorageSync("yearIndex")
            })
        }
        if (uni.getStorageSync("termIndex")) {
            that.setData({
                termIndex: uni.getStorageSync("termIndex")
            })
        }
        if (uni.getStorageSync("weekIndex")) {
            that.setData({
                weekIndex: uni.getStorageSync("weekIndex")
            })
        }
        if (uni.getStorageSync("WebConfig")) {
            that.setData({
                WebConfig: uni.getStorageSync("WebConfig")
            })
        }
        if (uni.getStorageSync("currentYear")) {
            that.setData({
                year: uni.getStorageSync("currentYear")
            })
        }
        if (uni.getStorageSync("currentTerm")) {
            that.setData({
                term: uni.getStorageSync("currentTerm")
            })
        }
        if (uni.getStorageSync("currentWeek")) {
            that.setData({
                week: uni.getStorageSync("currentWeek")
            })
        }

        if (uni.getStorageSync("courseList")) {
            that.setData({
                courseList: uni.getStorageSync("courseList")
            })
        }
        if (uni.getStorageSync("scoreList")) {
            that.setData({
                scoreList: uni.getStorageSync("scoreList")
            });
        }
        if (uni.getStorageSync("score")) {
            that.setData({
                score: uni.getStorageSync("score")
            });
        }
        if (uni.getStorageSync("opts")) {
            that.setData({
                opts: uni.getStorageSync("opts")
            });
        }

        getData(app.globalData.ApiUrl + 'api/Android/WebConfig', {
            'SafeCode': uni.getStorageSync('SafeCode')
        }).then((msg) => {


            // 初始化选择框信息
            let currentYear = msg.year;
            let currentTerm = msg.term;
            let currentWeek = parseInt(msg.week);
            for (let i = 0; i < that.yearList.length; i++) {
                if (currentYear === that.yearList[i].value) {
                    that.setData({
                        yearIndex: i
                    });
                    uni.setStorageSync("yearIndex", i);
                    break;
                }
            }

            for (let i = 0; i < that.termList.length; i++) {
                if (currentTerm == that.termList[i].value) {
                    that.setData({
                        termIndex: i
                    });
                    uni.setStorageSync("termIndex", i);
                    break;
                }
            }
            for (let i = 0; i < that.weekList.length; i++) {
                if (currentWeek === that.weekList[i]) {
                    that.setData({
                        weekIndex: i
                    });
                    uni.setStorageSync("weekIndex", i);
                    break;
                }
            }


            uni.setStorageSync("WebConfig", msg);
            uni.setStorageSync("currentYear", currentYear);
            uni.setStorageSync("currentTerm", currentTerm);
            uni.setStorageSync("currentWeek", currentWeek);
            that.setData({
                WebConfig: msg,
                year: currentYear,
                term: currentTerm,
                week: currentWeek
            });


            this.SearchTable(currentWeek);

            // getData(app.globalData.ApiUrl + "api/Android/getTableData", {
            //     SafeCode: uni.getStorageSync('SafeCode')
            // }).then((msg) => {
            //     console.log("getTableData:");
            //     console.log(msg);
            //
            //     uni.setStorageSync("courseList", msg);
            //     that.setData({
            //         courseList: msg
            //     })
            // });


        });

        getData(app.globalData.ApiUrl + 'api/Android/grade', {
            SafeCode: uni.getStorageSync('SafeCode')
        }).then((msg) => {


            uni.hideLoading();
            let scores = msg.data;
            let sum = msg.sum;

            let courseName = [];
            let scoreData = [];
            let orderData = [];


            for (var k = 0; k < scores.length; k++) {


                if (scores[k].score >= 60) {
                    scoreData.push(scores[k].score);
                } else {
                    scoreData.push({
                        "value": scores[k].score,
                        "color": "#f04864"
                    });
                }
                courseName.push(scores[k].courseName);
                orderData.push(scores[k].order);
            }
            that.setData({
                score: scores,
                scoreList: {
                    "categories": courseName,
                    "series": [{
                        "dataLabel": "false",
                        "name": "成绩",
                        "index": 1,
                        "data": scoreData,
                        "type": "column",
                        // "color":"green"
                    }, {
                        "dataLabel": "false",
                        "name": "排名",
                        "data": orderData,
                        "type": "line",
                        "style": "curve",
                        // "color": "blue",
                    }]
                },
                opts: {
                    enableScroll: true,
                    xAxis: {
                        disableGrid: true,
                        scrollShow: true,
                        itemCount: 4,
                        labelCount: 4
                    },
                    yAxis: {
                        data: [
                            {
                                position: 'left',
                                title: '排名',
                                min: sum + 1,
                                max: 1
                            },
                            {
                                position: 'right',
                                min: 0,
                                max: 100,
                                title: '成绩',
                                textAlign: 'left',
                            },
                        ],
                    },
                }
            });


            uni.setStorageSync("scoreList", that.scoreList);
            uni.setStorageSync("score", that.score);
            uni.setStorageSync("opts", that.opts);


        });
    },
    methods: {


        /**
         * 切换页面
         * @param e 页面中的对象
         */
        tabSelect: function (e) {
            this.setData({
                wall: parseInt(e.currentTarget.dataset.id)
            });

            let that = this;

            setTimeout(function () {
                that.Search();
                that.SearchTable();
            },1000);

        },


        yearChange: function (e) {
            let that = this;
            that.setData({
                yearIndex: e.detail.value
            });
            that.setData({
                year: that.yearList[that.yearIndex].value
            });

            console.log(that.year);

            that.Search();
            that.SearchTable();
        },
        termChange: function (e) {
            let that = this;
            that.setData({
                termIndex: e.detail.value
            });
            that.setData({
                term: that.termList[that.termIndex].value
            });
            that.Search();
            that.SearchTable();
        },
        weekChange: function (e) {
            let that = this;
            that.setData({
                weekIndex: e.detail.value
            });
            that.setData({
                week: that.weekList[that.weekIndex]
            });
            that.Search();
            that.SearchTable();
        },
        input: function (e) {
            this.setData({
                year: e.detail.value
            });
            this.Search();
            this.SearchTable();
        },

        SearchTable: function (week=-1) {
            let that = this;

            that.setData({
                show: false
            });

            if(week === -1){
                week = that.week;
            }


            this.$myFunction.getData(app.globalData.ApiUrl + "api/Android/getTableData", {
                SafeCode: uni.getStorageSync('SafeCode'),
                year: that.year,
                term: that.term,
                week: week-1
            });
            this.$myFunction.getData(app.globalData.ApiUrl + "api/Android/getTableData", {
                SafeCode: uni.getStorageSync('SafeCode'),
                year: that.year,
                term: that.term,
                week: week-2
            });
            this.$myFunction.getData(app.globalData.ApiUrl + "api/Android/getTableData", {
                SafeCode: uni.getStorageSync('SafeCode'),
                year: that.year,
                term: that.term,
                week: week+1
            });
            this.$myFunction.getData(app.globalData.ApiUrl + "api/Android/getTableData", {
                SafeCode: uni.getStorageSync('SafeCode'),
                year: that.year,
                term: that.term,
                week: week+2
            });

            this.$myFunction.getData(app.globalData.ApiUrl + "api/Android/getTableData", {
                SafeCode: uni.getStorageSync('SafeCode'),
                year: that.year,
                term: that.term,
                week: week
            }).then((msg) => {

                uni.setStorageSync("courseList", msg);

                that.setData({
                    show: true
                });
                that.setData({
                    courseList: msg
                });
            });
        },

        tabToEmpty: function (e) {
            uni.navigateTo({
                url: "../empty/empty"
            });
        },

        touchStart: function (e) {

            this.setData({
                startTouchX: e.touches[0].clientX,
                startTouchY: e.touches[0].clientY
            })
            // console.log(this.startTouchX);
        },
        touchEnd: function (e) {
            let startX = this.startTouchX;
            let endX = e.changedTouches[0].clientX

            let startY = this.startTouchY;
            let endY = e.changedTouches[0].clientY


            let that = this;
            let week = that.week;
            let weekIndex = that.weekIndex;
            if (endX - startX > 100 && Math.abs(endY - startY) < 100) {

                if (week > 1) {
                    that.setData({
                        weekIndex: weekIndex - 1,
                        week: week - 1
                    })

                    that.SearchTable();
                }

            } else if (endX - startX < -100 && Math.abs(endY - startY) < 100) {

                if (week < 20) {
                    that.setData({
                        weekIndex: weekIndex + 1,
                        week: week + 1
                    })
                    that.SearchTable();
                }
            }

        },

        Search: function (e) {
            let that = this;




            getData(app.globalData.ApiUrl + 'api/Android/grade', {
                SafeCode: uni.getStorageSync('SafeCode'),
                year: that.year,
                term: that.term
            }).then((msg) => {


                let scores = msg.data;
                let sum = msg.sum;

                let courseName = [];
                let scoreData = [];
                let orderData = [];


                for (var k = 0; k < scores.length; k++) {


                    if (scores[k].score >= 60) {
                        scoreData.push(scores[k].score);
                    } else {
                        scoreData.push({
                            "value": scores[k].score,
                            "color": "#f04864"
                        });
                    }
                    courseName.push(scores[k].courseName);
                    orderData.push(scores[k].order);
                }
                that.setData({
                    score: scores,
                    scoreList: {
                        "categories": courseName,
                        "series": [{
                            "dataLabel": "false",
                            "name": "成绩",
                            "index": 1,
                            "data": scoreData,
                            "type": "column",
                            // "color":"green"
                        }, {
                            "dataLabel": "false",
                            "name": "排名",
                            "data": orderData,
                            "type": "line",
                            "style": "curve",
                            // "color": "blue",
                        }]
                    },
                    opts: {
                        enableScroll: true,
                        xAxis: {
                            disableGrid: true,
                            scrollShow: true,
                            itemCount: 4,
                            labelCount: 4
                        },
                        yAxis: {
                            data: [
                                {
                                    position: 'left',
                                    title: '排名',
                                    min: sum + 1,
                                    max: 1
                                },
                                {
                                    position: 'right',
                                    min: 0,
                                    max: 100,
                                    title: '成绩',
                                    textAlign: 'left',
                                },
                            ],
                        },
                    }
                });


                uni.setStorageSync("scoreList", that.scoreList);
                uni.setStorageSync("score", that.score);
                uni.setStorageSync("opts", that.opts);


            });
        }
    }
}
</script>
<style>
@import './grade.css';

.table-container {
    margin-left: 5%;
    width: 45%;
    /* padding-left:7%; */
    display: flex;
    align-items: center;
}

.table-container2 {
    width: 20%;
    padding-left: 4%;
    display: flex;
    align-items: center;
}

.table-container3 {
    width: 35%;
    padding-left: 5%;
    display: flex;
    align-items: center;
}

.week-select {
    width: 100%;
    height: 56 rpx;
    display: flex;
    align-items: center;
    background: #F5F7FA;
}

.selecter {

    width: 40%;
    text-align: center;
    align-items: center;
}

.selecter2 {
    /* border-color: #000000;
    border-style: dashed; */
    margin-left: 12%;
    width: 58%;
    text-align: center;
    align-items: center;
}

.selecter-left {

    width: 100%;
    padding-left: 0%;
    text-align: center;
    align-items: center;
}

.selecter-right {
    width: 100%;
    padding-right: 40%;
    text-align: right;
}

.colorTiao {
    width: 7rpx;
    border-radius: 10rpx;
    height: 80rpx;
}
</style>
